import React from 'react';
import { List, InputItem, NavBar, Icon, Steps, Progress, WhiteSpace, WingBlank } from 'antd-mobile';
import ContentCard from '../../components/contentCard/index'
import { LeftOutlined } from '@ant-design/icons';

import { Link } from 'react-router-dom';
export default class TabBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            percent: 60
        }
    }
    render() {
        const Step = Steps.Step;

        const steps = [{
            title: 'Finished',
            description: 'This is description',
        }, {
            title: 'In Progress',
            description: 'This is description',
        }, {
            title: 'Waiting',
            description: 'This is description',
        }].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
        return (
            <div style={{ backgroundColor: '#F5F5F9' }}>
                <NavBar
                    leftContent={<Link to='/home'><LeftOutlined style={{ fontSize: 20, color: '#fff' }} /></Link>}

                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent='提交'
                >申请
                </NavBar>
                <WhiteSpace size='lg' />
                <WhiteSpace size='lg' />
                <Steps current={1} direction="horizontal" size="small">{steps}</Steps>
                <WhiteSpace />

                <List renderHeader={() => '填写申请消息'}>
                    <InputItem
                        clear
                        placeholder="auto focus"
                        ref={el => this.autoFocusInst = el}
                    >直播链接</InputItem>
                    <InputItem
                        clear
                        placeholder="click the button below to focus"
                        maxLength={3}
                        ref={el => this.inputRef = el}
                    >粉丝牌</InputItem>
                   
                </List>
            </div>
        );
    }
}
